/**
 * 功能：让元素在一定的时间内完成动画
 * @param {object} ele DOM节点
 * @param {object} targetCssObj
 * @param {number} duration 动画持续的时间
 * @param {function} callback 动画执行完毕后的回调函数
 * @returns void
 */
function animate(ele, targetCssObj, duration, callback) {
    var interval = 20 // 每20ms移动一次
    var moveTotalCount = duration / interval // 移动的总次数
    var timer
    // 得到元素ele最初始化的位置信息
    var initCssStyle = {}
    for (var cssKey in targetCssObj) {
      initCssStyle[cssKey] = parseInt(window.getComputedStyle(ele, null)[cssKey])
    }
    // 定时器，每隔20ms移动指定的像素位置
    var count = 0
    timer = setInterval(function () {
      count++
      // 计算出每次移动的距离：（终点位置-起点（初始）位置） / 总移动的次数
      for (var cssKey in targetCssObj) {
        var stepMove =
          (parseInt(targetCssObj[cssKey]) - initCssStyle[cssKey]) / moveTotalCount
        // 开始移动起来
        ele.style[cssKey] = initCssStyle[cssKey] + stepMove * count + 'px'  
      }
  
      // 到达了总次数，则停止移动
      if (count >= moveTotalCount) {
        clearInterval(timer)
        // 强制拉回到终点位置，避免小数的误差
        console.log();
        for (var cssKey in targetCssObj) {
          ele.style[cssKey] = targetCssObj[cssKey] + 'px'
        }
        // 若用户传递回调则执行，没传就不执行
        callback && callback()
      }
    }, interval)
  }
  